<template>
	<view class="container">
		<!-- 内容主体 -->
		<view class="content">
			<view class="title">
				<text>普通用户注册</text>
			</view>
			<form @submit="onSubmit" class="form">
				<view class="form-item">
					<label>学号</label>
					<input type="text" v-model="studentid" placeholder="请输入" />
				</view>
				<view class="form-item">
					<label>姓名</label>
					<input type="text" v-model="name" placeholder="请输入" />
				</view>
				<view class="form-item">
					<label>密码</label>
					<input type="password" v-model="password" placeholder="请输入" />
				</view>
				<view class="form-item">
					<label>学校</label>
					<picker :range="schools" :range-key="'title'" @change="onSchoolChange" v-model="schoolIndex">
						<input type="text" :value="schools[schoolIndex]? schools[schoolIndex].title : ''"
							placeholder="输入选择" />
					</picker>
				</view>
				<view class="form-item">
					<label>性别</label>
					<radio-group v-model="sex">
						<label>
							<radio value="0" />男
						</label>
						<label>
							<radio value="1" />女
						</label>
					</radio-group>
				</view>
				<view class="form-item">
					<label>邮箱</label>
					<input type="text" v-model="email" placeholder="请输入" />
				</view>
				<view class="form-item">
					<label>验证码</label>
					<view class="input-button-group">
						<input type="text" v-model="code" placeholder="请输入" />
						<button :disabled="isCounting" @click="sendCode"
							:class="{ 'btn': true, 'btn-disabled': isCounting }">
							{{ isCounting ? `验证码已发送（${time}）` : '发送验证码' }}
						</button>
					</view>
				</view>
				<view class="form-item">
					<button form-type="submit" class="register">注册</button>
				</view>
			</form>
		</view>

		<!-- 底部 -->
		<view class="footer">
			<text>© - 联系校事达官方客服：6666666</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				studentid: '',
				name: '',
				password: '',
				schoolIndex: 0,
				sex: '0',
				email: '',
				code: '',
				time: 0,
				isCounting: false,
				schools: [{
						title: '中南大学',
						id: 101
					},
					{
						title: '湖南大学',
						id: 102
					},
					{
						title: '长沙大学',
						id: 103
					}
				]
			};
		},
		methods: {
			onSchoolChange(e) {
				this.schoolIndex = e.detail.value;
			},
			sendCode(evt) {
				if (!this.validateEmail()) return;
				this.time = 60;
				this.isCounting = true;
				const timer = setInterval(() => {
					if (this.time > 1) {
						this.time--;
					} else {
						this.isCounting = false;
						clearInterval(timer);
					}
				}, 1000);
				// 这里可以添加发送验证码的接口调用
			},
			validateEmail() {
				const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
				if (!emailRegex.test(this.email)) {
					uni.showToast({
						title: '请输入有效的邮箱地址',
						icon: 'none'
					});
					return false;
				}
				return true;
			},
			validateStudentid() {
				if (this.studentid.length < 3) {
					uni.showToast({
						title: '学号至少得3个字符',
						icon: 'none'
					});
					return false;
				}
				return true;
			},
			validateName() {
				if (this.name.length < 1) {
					uni.showToast({
						title: '姓名至少得1个字符',
						icon: 'none'
					});
					return false;
				}
				return true;
			},
			validatePassword() {
				if (!this.password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return false;
				}
				return true;
			},
			validateSchool() {
				if (!this.schools[this.schoolIndex]) {
					uni.showToast({
						title: '请选择学校',
						icon: 'none'
					});
					return false;
				}
				return true;
			},
			validateCode() {
				if (!this.code) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return false;
				}
				return true;
			},
			onSubmit() {
				if (!this.validateStudentid() || !this.validateName() || !this.validatePassword() || !this
					.validateSchool() || !this.validateEmail() || !this.validateCode()) return;
				// 这里可以添加注册的接口调用
				uni.showToast({
					title: '普通用户注册成功',
					icon: 'success'
				});
				uni.navigateTo({
					url: "/pages/login/login"
				})
			}
		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		min-height: 93vh;
	}

	.content {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20px;
	}

	.title {
		margin-bottom: 20px;
		color: #333;
	}

	.form {
		width: 100%;
		max-width: 400px;
	}

	.form-item {
		display: flex;
		flex-direction: column;
		margin-bottom: 20px;
	}

	/* 修改验证码输入框和按钮所在的样式 */
	.form-item .input-button-group {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.form-item .input-button-group input {
		flex: 1;
		padding: 12px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 16px;
		margin-right: 10px;
	}

	.form-item label {
		font-weight: bold;
		margin-bottom: 5px;
	}

	.form-item input {
		padding: 12px;
		border: 1px solid #ccc;
		border-radius: 4px;
		font-size: 16px
	}

	/* .form-item button{
    background-color: #1E9FFF;
    color: white
} */

	.form-aux {
		/* color: #999; */
		font-size: 12px;
		margin-top: 5px;
	}

	.btn {
		padding: 4px;
		border: none;
		border-radius: 4px;
		background-color: #1E9FFF;
		color: white;
		font-size: 16px;
		cursor: pointer;
		margin-top: 0px;
		white-space: nowrap;
		height: 50px;
	}

	.btn-disabled {
		background-color: #ccc;
		cursor: not-allowed;
	}

	.admin-link {
		margin-top: 20px;
	}

	.admin-link navigator {
		color: #16b777;
		text-decoration: none;
	}

	.footer {
		text-align: center;
		padding: 20px;
		background-color: #f8f8f8;
	}

	.register {
		background-color: #1E9FFF;
		color: white;
		width: 100%;
	}
</style>